<template>
  <div class="card">
    <div class="p-6 border-b border-gray-100">
      <h3 class="font-semibold text-lg">站点基本设置</h3>
      <p class="text-gray-500 mt-1">配置站点的基本信息和参数</p>
    </div>
    <div class="p-6">
      <form class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">站点名称 <span class="text-danger">*</span></label>
            <input type="text" class="form-input" v-model="form.siteName" placeholder="请输入站点名称">
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">站点标题</label>
            <input type="text" class="form-input" v-model="form.siteTitle" placeholder="请输入站点标题，将显示在浏览器标题栏">
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">站点域名</label>
            <input type="text" class="form-input" v-model="form.domain" placeholder="请输入已绑定的域名">
            <p class="text-xs text-gray-500 mt-1">未绑定独立域名将使用系统二级域名</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">站点模板</label>
            <select class="form-input" v-model="form.template">
              <option value="">请选择模板</option>
              <option value="business">企业官网模板</option>
              <option value="ecommerce">电商商城模板</option>
              <option value="education">教育机构模板</option>
              <option value="blog">博客资讯模板</option>
              <option value="restaurant">餐饮美食模板</option>
            </select>
          </div>
          
          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">站点描述</label>
            <textarea class="form-input h-24" v-model="form.description" placeholder="请输入站点描述，将用于SEO和介绍"></textarea>
          </div>
          
          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">网站Logo</label>
            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
              <div class="space-y-1 text-center">
                <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                <div class="flex text-sm text-gray-600">
                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
                    <span>上传图片</span>
                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
                  </label>
                  <p class="pl-1">或拖放文件</p>
                </div>
                <p class="text-xs text-gray-500">支持PNG, JPG, GIF 格式，建议尺寸 200x80px</p>
              </div>
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">站点状态</label>
            <select class="form-input" v-model="form.status">
              <option value="online">已上线</option>
              <option value="draft">草稿</option>
              <option value="offline">已下线</option>
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">默认首页</label>
            <select class="form-input" v-model="form.homePage">
              <option value="index">系统默认首页</option>
              <option value="custom">自定义页面</option>
            </select>
          </div>
        </div>
        
        <div class="border-t border-gray-200 pt-6">
          <h4 class="text-sm font-medium text-gray-900 mb-4">高级设置</h4>
          <div class="space-y-4">
            <div class="flex items-center">
              <input id="enable-comment" name="enable-comment" type="checkbox" v-model="form.enableComment" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="enable-comment" class="ml-2 block text-sm text-gray-900">
                启用网站评论功能
              </label>
            </div>
            
            <div class="flex items-center">
              <input id="enable-statistics" name="enable-statistics" type="checkbox" v-model="form.enableStatistics" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="enable-statistics" class="ml-2 block text-sm text-gray-900">
                启用访问统计功能
              </label>
            </div>
            
            <div class="flex items-center">
              <input id="enable-ssl" name="enable-ssl" type="checkbox" v-model="form.enableSsl" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="enable-ssl" class="ml-2 block text-sm text-gray-900">
                启用HTTPS加密访问 (需要已备案域名)
              </label>
            </div>
          </div>
        </div>
        
        <div class="flex justify-end gap-3 pt-6 border-t border-gray-200">
          <button type="button" class="btn btn-secondary" @click="cancel">
            <i class="fa fa-arrow-left"></i>
            <span>返回</span>
          </button>
          <button type="button" class="btn btn-primary" @click="saveSettings">
            <i class="fa fa-save"></i>
            <span>保存设置</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 表单数据
const form = ref({
  siteName: '',
  siteTitle: '',
  domain: '',
  template: '',
  description: '',
  status: 'online',
  homePage: 'index',
  enableComment: true,
  enableStatistics: true,
  enableSsl: false
})

// 页面加载时获取站点ID并加载数据
const init = () => {
  const siteId = route.query.id
  if (siteId) {
    // 模拟从API加载数据
    form.value = {
      siteName: '时尚服装商城',
      siteTitle: '时尚服装商城 - 最新款服装尽在这里',
      domain: 'www.fashion-shop.com',
      template: 'ecommerce',
      description: '专业的时尚服装在线商城，提供最新款男女服装、配饰等产品，品质保证，价格优惠。',
      status: 'online',
      homePage: 'index',
      enableComment: true,
      enableStatistics: true,
      enableSsl: true
    }
  }
}

// 保存设置
const saveSettings = () => {
  // 模拟保存操作
  alert('站点设置已保存成功！')
  router.push('/site-list')
}

// 取消操作
const cancel = () => {
  router.push('/site-list')
}

// 初始化
init()
</script>

<style scoped>
</style>
